<template>
    <div class="box">
        <div class="table-header" >
            <template v-if="editable">
                <el-button
                    v-show="!editStatus"
                    type="text"
                    size="mini"
                    @click="onEdit">编辑
                </el-button>
                <el-button
                    v-show="editStatus"
                    type="text"
                    size="mini"
                    @click="onFinish">提交
                </el-button>
                <el-button
                    v-show="editStatus"
                    type="text"
                    size="mini"
                    @click="onCancel">取消
                </el-button>

                <el-button
                    v-show="editStatus"
                    type="text"
                    size="mini"
                    @click="onAdd">添加
                </el-button>
                <el-button
                    type="text"
                    size="mini"
                    v-show="changeData['remove'].length>0 && editStatus"
                    @click="onDelete">删除
                </el-button>
            </template>
        </div>
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange">
                border
                style="width: 100%">
            <el-table-column
                v-if="editStatus"
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                    v-for="(head,index) in header"
                    :key="index"
                    :label="head.label"
                    :width="head.width ">
                <template slot-scope="scope">
                    <div v-if="editStatus">
                        <el-switch
                                v-if="head.type === 'switch'"
                                v-model="scope.row[head.value]"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="0"
                                @change = "rowChange(scope.row)"
                        >
                        </el-switch>
                        <div
                                v-else-if="head.type === 'text'"
                        >
                            {{scope.row[head.value]}}
                        </div>
                        <div
                            v-else-if="head.type === 'longtext'"
                        >
                            <el-button type="text" @click="onEditText(scope.row,head.value)">编辑<i class="el-icon-search el-icon--right"></i></el-button>
                        </div>
                        <el-input
                                v-else
                                v-model="scope.row[head.value]"
                                @change="rowChange(scope.row)"
                        ></el-input>
                    </div>
                    <div v-else>
                        <el-switch
                                v-if="head.type === 'switch'"
                                v-model="scope.row[head.value]"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="0"
                                disabled
                        >
                        </el-switch>
                        <div
                            v-else-if="head.type === 'longtext'"
                        >
                            <el-button e="213421" type="text" @click="onEditText(scope.row,head.value)">查看<i class="el-icon-search el-icon--right"></i></el-button>
                        </div>
                        <template v-else>
                            <div class="overhidden">
                                {{head.defaultValue || scope.row[head.value]}}
                            </div>
                        </template>
                    </div>

                </template>
            </el-table-column>
            <!--<el-table-column label="操作">-->
                <!--<template slot-scope="scope">-->
                    <!--<template v-if="editStatus">-->
                        <!--<el-button-->
                                <!--size="mini"-->
                                <!--@click="onFinish(scope.$index, scope.row)">完成-->
                        <!--</el-button>-->
                        <!--<el-button-->
                                <!--type="danger"-->
                                <!--size="mini"-->
                                <!--@click="onCancel(scope.$index, scope.row)">取消-->
                        <!--</el-button>-->
                    <!--</template>-->
                    <!--<template v-else>-->
                        <!--<el-button-->
                                <!--size="mini"-->
                                <!--@click="onEdit(scope.$index, scope.row)">编辑-->
                        <!--</el-button>-->
                        <!--<el-button-->
                                <!--type="danger"-->
                                <!--size="mini"-->
                                <!--@click="onDelete(scope.$index, scope.row)">删除-->
                        <!--</el-button>-->
                    <!--</template>-->

                <!--</template>-->

            <!--</el-table-column>-->


        </el-table>
        <el-dialog title="" :visible.sync="quillVisible">
            <vue-editor v-if="editStatus"  v-model="currentRow[currentCol]" @text-change="rowChange(currentRow)"></vue-editor>
            <div v-else class="ql-editor" v-html="currentRow[currentCol]"></div>
        </el-dialog>
    </div>

</template>

<script>
    import { VueEditor, Quill } from "vue2-editor";
    export default {
        name: "bbw-table",
        data() {
            return {
                editStatus: false,
                sourceData:[],
                changeData:{
                    update:[],
                    remove:[],
                    add:[]
                },
                remove:[],
                quillVisible: false,
                currentRow: {},
                currentCol: ''
            }
        },
        props: {
            editable:{
                default:true
            },
            tableData: {
                default() {
                    return []
                }
            },
            column: {
                default() {
                    return []
                }
            },
            header: {
                default() {
                    return []
                },

            },
            title:{
                default:''
            }
        },
        components:{
            VueEditor
        },
        watch:{
            ['tableData.length'](val){
                for(let i in this.tableData){
                    this.tableData[i]._id = ~~i
                }
            },
        },
        mounted() {

        },
        methods: {
            rowChange(row){
                if(!row._action){
                    row._action = 'edit'
                }
            },
            onEdit(){
                this.sourceData = JSON.parse(JSON.stringify(this.tableData))
                this.editStatus = true
            },
            onDelete(){
                let remove = [],i = 0

                for(let item of  this.changeData['remove']){
                    if(item._action !== 'add'){
                        remove.push(item)
                    }
                    this.tableData.splice(item._id - i,1)
                    i++
                }
                this.remove = remove
            },
            onFinish(){
                for(let item of this.tableData){
                    if(item._action === 'add'){
                        this.changeData['add'].push(item)
                    }else if(item._action === 'edit'){
                        this.changeData['update'].push(item)
                    }
                    delete item._action
                }
                this.changeData['remove'] = this.remove
                this.editStatus = false
                this.$emit('onFinish',this.changeData)
                // this.tableData=[]
                this.changeData={
                    update:[],
                    remove:[],
                    add:[]
                }
            },
            onCancel(){
                this.editStatus = false
                this.changeData={
                    update:[],
                    remove:[],
                    add:[]
                }
                for(let item of this.tableData){
                    delete item._action
                }
                this.$emit('update:data', this.sourceData)
            },
            onAdd(){
                let newRow = {}
                for(let label of this.header){
                    newRow[label.value] = ''
                }
                newRow._action = 'add'
                this.tableData.push(newRow)
            },
            handleSelectionChange(data){
                data.sort((a,b)=>{
                    return a._id > b._id;
                })
                this.changeData['remove'] = data
            },
            onEditText(row, col){
                this.currentRow = row
                this.currentCol = col
                this.quillVisible = true
            },

        }
    }
</script>

<style scoped>
        .table-header{
            background: #d8d8d8;
            line-height:40px;
            color: #FFFFFF;
            padding: 0 20px;
        }
    .box{
        border: 1px solid #ececec;
    }
    .overhidden{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
        .lookup{
            font-size: 20px;
            cursor: pointer;
            margin-left: 5px;
        }
</style>
